為你的 Github 首頁加上酷酷的貪吃蛇動畫


Posted by 孫胖 on 2023-09-10

為什麼要這樣做?

這會很麻煩嗎?

Github Action 是什麼?

說夠多廢話了...趕緊教我怎麼用!

開始!

建立你的個人 Token

名稱: generate-snake-game-from-github-contribution-grid-token

新增一個「特別的」Repository

建立 Github Action

路徑: .github/workflows/main.yml

main.yml 內容

name: generate-snake-game-from-github-contribution-grid

on:
  create:
  push:
  schedule: # execute every 24 hours
    - cron: "* */24 * * *"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate

    steps:
      - name: generate github-contribution-grid-snake.svg
        uses: aelassas/snk/svg-only@main
        with:
          github_user_name: ${{ github.repository_owner }}
          outputs: |
            dist/github-contribution-grid-snake.svg
            dist/github-contribution-grid-snake-dark.svg?palette=github-dark
      - name: push github-contribution-grid-snake.svg to the output branch
        uses: crazy-max/ghaction-github-pages@v3.1.0
        with:
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.TOKEN }}

將你的個人 Token 設定到 Repository

設定 Secrets (名稱: TOKEN)

啟動 Github Action

Run workflow

設定 README.md

記得改成自己的 username

![github contribution grid snake animation](https://raw.githubusercontent.com/rykersun/rykersun/output/github-contribution-grid-snake-dark.svg#gh-dark-mode-only)![github contribution grid snake animation](https://raw.githubusercontent.com/rykersun/rykersun/output/github-contribution-grid-snake.svg#gh-light-mode-only)

完成


#Github #Snake







Related Posts

[ 筆記 ] DOM - 事件傳遞機制:捕獲與冒泡、事件代理

[ 筆記 ] DOM - 事件傳遞機制:捕獲與冒泡、事件代理

JavaScript 五四三 Ep.02 Array.prototype.forEach()

JavaScript 五四三 Ep.02 Array.prototype.forEach()

[Week4] JS 實作串接 API(三)

[Week4] JS 實作串接 API(三)


Comments